<template>
  <contents :heightInclude="['tabBar', 'navBar']" class="vin_page">
    <u-navbar is-fixed>
      <view class="search_wrap" @click.stop="shouList = true">
        <u-search
          focus
          shape="square"
          placeholder="请输入配件"
          v-model="form.commonName"
          @custom="getData(1)"
          :action-style="{
            height: '60rpx',
            lineHeight: '60rpx'
          }"
          :action-text="$t('locales.search')"
          @blur="searchBlur"
        ></u-search>
      </view>
    </u-navbar>
    <view class="vin_info">
      <view class="title"
        >为您查询到以下配件明细，您也可以更换配件名称，继续查询其他配件。</view
      >
      <Tables
        :headers="headers"
        :contents="tabList"
        :show-vert-border="false"
        :url-col="urlCol"
        :font-size="[20]"
        first-line-fixed
      />
    </view>
  </contents>
</template>
<script>
import SubmitBtn from '@/components/submitBtn'
import Tables from '@/components/wyb-table/wyb-table'
import { copy } from '@/util'
import { goodsList } from '@/api/http/vin'
export default {
  components: {
    SubmitBtn,
    Tables
  },
  data() {
    const theUrl = '/pages/productDetails/index?id=761'
    return {
      form: {
        commonName: ''
      },
      headers: [
        {
          label: '序号',
          key: 'index',
          width: '70'
        },
        {
          label: '配件编码',
          key: 'accessoryCode',
          width: '200'
        },
        {
          label: '配件名称',
          key: 'commonName',
          width: '390'
        },
        {
          label: '操作',
          key: 'url',
          width: '70'
        }
      ],
      urlCol: [
        {
          type: 'route',
          key: 'url'
        }
      ],
      tabList: [],
      routerParams: {},
      pageNo: 1
    }
  },
  onLoad(opt) {
    this.routerParams = opt
    this.getData()
  },
  onReachBottom() {
		this.pageNo += 1
		this.getData(this.pageNo)
	},
  methods: {
    getData(pageNo = 1) {
      goodsList({
        pageNo,
        pageSize: 50,
        carGoodsStandardIds: this.routerParams.id,
        domainPrefix: this.$store.getters.domainPrefix,
        commonName: this.form.commonName
      }).then((res) => {
        this.pageNo = pageNo
        if (res.code === 200) {
          let list = res.data.records
          list.map((item) => {
            item.url = [
              '详情',
              '/pages/productDetails/index?id=' + item.goodsId
            ]
          })
          if (pageNo === 1) {
            this.tabList = list
          } else {
            this.tabList = this.tabList.concat(list)
          }
          this.tabList.map((item, i) => item.index = i + 1)
        } else {
          uni.showToast({
            icon: 'none',
            title: res.message
          })
        }
      })
    },
    copyStr() {
      copy(this, 'LGAX5D656J3020499')
    },
    navSwitch(url) {
      uni.navigateTo({
        url
      })
    },
    searchBlur(val) {
      this.form.commonName = val.replace(/\s+/g,"")
    }
  }
}
</script>
<style lang="scss" scoped>
.vin_page {
  .search_wrap {
    width: 100%;
  }
  .vin_info {
    padding: 0 10rpx;
    .title {
      line-height: 40rpx;
      padding: 10rpx 20rpx;
      font-size: 20rpx;
      color: rgb(255, 127, 58);
    }
  }
}
</style>